<template>
	<view class="f-f-c p20">
		<u-navbar
		:autoBack="true" bgColor="#fff"
		leftIconColor='#000'
		:titleStyle="{ color: '#000'}"
		 title="我的余额" rightText='' :border="false" :placeholder="true">
		 
		</u-navbar>
		<view class="">
			<view class="m20 p20 b-s b-rd f-f-c p-s" >
				<view class="pt20 pb20 fb f64 c3 f">
					
					<image class="mr20" src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/wallet.png" style="width: 30px;height: 30px" mode=""></image>
					￥{{Number(userMation.nowMoney).toFixed(2)}}
				</view>
				<view class="f-s-b  f24">
					<span class="c9">可提现余额</span>
					<span class="sureBtn-nb " @click="navTo('/pagesA/user/draw')">我要提现</span>
				</view>
				<span class="f16 p-b cw p10" style="top:0;right:0;
				background-image: url(https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/bb.png);background-size: 100% 100%;
				"> 提现说明> </span>
			</view>
		 
			<view class="f-s-b c3 f24  p20">
				<view class="f">
					<span>{{datetime | formatTime}}</span>
					<u-icon @click="show = true" name="arrow-down" color="#999" size="16"></u-icon>
				</view>
				<span class="c9 fb">余额记录</span>
			</view>
			<view class="p20  m20  b-rd b-s" v-if='datalist.length > 0'>
				<view class="f-s-b p20" style="border-bottom: 1px solid #ccc;"
				 v-for="it2,ix2 in datalist" :key="ix2" 
				 @click="navTo('/pages/statistics/statisticsDetails?data=' + JSON.stringify(it2))">
 					<view class="">
						<view class="c3 f24">{{it2.pm == 0 ? '支出':'收入'}}</view>
						<view class="c6 f24 mt20">{{it2.type | TypeTxt}}</view>
						
					</view>
					<view class="f-f-c">
						<span class="fb cr " style="text-align: right;">{{it2.number,it2.category | categoryTypeTxt2}}</span>
						
						<span class="c9 f24 mt20" style="text-align: right;">{{it2.createTime}}</span>
					</view>
				</view>
				
			</view>
			<view class="" v-if='datalist.length == 0'>
				<u-empty mode="list"></u-empty>
			</view>
			
		</view>
		<u-datetime-picker
				:show="show"
				v-model="datetime"
				@close='close'
				@cancel='close'
				
				@confirm='confirm'
				mode="year-month"
		></u-datetime-picker>

		
	</view>
</template>


<script>
	 export default {
		data() {
			return {
				list1:[ ],
				high:0,
				show:false,
				value:null,
				value2:2,
				type:null,
				datetime:1672502400000,
				datalist:[],
				pageNum:1,
				ismore:true,
				userMation:{},
			}
		},
		onReachBottom() {
			if(this.ismore){
				this.pageNum ++
				this.getList()
			}else{
				 this.$api.msg('到底了')
			}
		},
		onReady() {
			
		},
		onLoad(){
			
		},
		onShow() {
			this.pageNum = 1
			this.getList()
			this.getUser()
		},
		filters: {
		    formatTime(timestamp){
				// console.log(timestamp,'timestamp')
			    const date = new Date(timestamp)
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				const hours = date.getHours()
				const minutes = date.getMinutes()
				const seconds = date.getSeconds()
				const formattedTime = `${year}年${month}月`
				return formattedTime
			}
		},
		methods: {
			getUser(){
				let that = this
				this.$api.request('get', 'user/app/getUser').then(res => {
			        this.userMation = res.data
					
				})
			},
			formatTime2(value,spe='-') {
					// value = value*1000
				   let data= new Date(value);
				   let year = data.getFullYear();
				   let month = data.getMonth() + 1;
				   let day = data.getDate();
				   let h = data.getHours();
				   let mm = data.getMinutes();
				   let s = data.getSeconds();
				   month = month >= 10 ? month : "0" + month;
				   day = day >= 10 ? day : "0" + day;
				   h = h >= 10 ? h : "0" + h;
				   mm = mm >= 10 ? mm : "0" + mm;
				   s = s >= 10 ? s : "0" + s;
				   return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
             },
			close() {
				this.show = false
			},
			confirm(val){
				this.show = false
				this.pageNum = 1
				this.datetime = val.value
				this.getList()
			},
			getList(){
				let date = new Date().getTime()
				let that = this
				let stime = that.formatTime2(that.datetime)
				let etime = that.formatTime2(date)
				
				this.$api.request('get', 'account/app/getAccountPageList',
				    {
				    pageNum:that.pageNum,
					pageSize:20,
					category:'now_money',
					startTime:stime,
					endTime:etime,
					}
				).then(res => {
				  // console.log(res.rows)
				  if(res.rows.length<20){
					  that.ismore = false
				  }else{
					  that.ismore = true
				  }
				  if(that.pageNum == 1){
					   that.datalist = res.rows
				  }else{
					  that.datalist = [...that.datalist,...res.rows]
				  }
				 
				}).catch(err => {
				  this.$api.msg('请求失败，请稍后再试')
				})
			}
		}
	}
</script>

<style lang='scss'>
	page,
	.content {
		min-height: 50%;
		background-color: #f8f8f8;
	}

	.btn{
		width: 100%;
		height: 68rpx;
		background: #1AC388;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		opacity: 1;
		border: 2rpx solid var(--theme);
		text-align: center;
		line-height: 68rpx;
		color:#fff;
	}
	.btn2{
		width: 100%;
		height: 68rpx;
		background: rgba(26,195,136,0);
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		opacity: 1;
		border: 2rpx solid var(--theme);
		text-align: center;
		line-height: 68rpx;
		color: var(--theme);
	}
	
</style>
